<template>
  <div>
    <van-icon v-if="!show" name="arrow-left" color="#fff" size="0.7rem" @click="GOback" />
    <div class="header_detail">
      <header class="shop_detail_header">
        <div class="header_cover_img_con">
          <img :src="'//elm.cangdu.org/img/'+DetailsData.image_path" alt="">
        </div>
        <section class="description_header">
          <div class="description_top">
            <section class="description_left">
              <img :src="'//elm.cangdu.org/img/'+DetailsData.image_path" alt="">
            </section>
            <section class="description_right" @click="goDetailsShang">
              <h4 class="ellipsis h4top">{{DetailsData.name}}</h4>
              <p class="description_text description_te" v-if="DetailsData.piecewise_agent_fee">商家配送/分钟送达/{{DetailsData.piecewise_agent_fee.tips}}</p>
              <p class="description_promotion ellipsis description_te">公告：{{DetailsData.promotion_info}}</p>

            </section>
            <van-icon name="arrow" color="#fff" size="0.7rem" />
          </div>
          <footer class="description_footer" v-if="DetailsData.activities" v-show="DetailsData.activities[0]" @click="show1">
            <p class="ellipsis footer_p" v-if="DetailsData.activities[0]">
              <span class="tip_icon1" :style="'background-color:'+'#'+ DetailsData.activities[0].icon_color+';' +'border-color:'+'#'+DetailsData.activities[0].icon_color">{{DetailsData.activities[0].icon_name}}</span>
              <span> {{DetailsData.activities[0].description}} (APP专享)</span>
            </p>
            <p>{{DetailsData.activities.length}}个活动</p>
            <van-icon name="arrow" color="#fff" />
          </footer>
          <van-overlay z-index="999" :show="show" @click="show2">
            <template #default>
              <div class="overlay">
                <h4 class="h4top titletop">{{DetailsData.name}}</h4>
                <section class="activities_list">
                  <header class="activities_title_style">
                    <span>优惠信息</span>
                  </header>
                  <ul>
                    <p class="ellipsis footer_p" v-for="item in DetailsData.activities" :key="item.id">
                      <span class="tip_icon1" :style="'background-color:'+'#'+ item.icon_color+';' +'border-color:'+'#'+item.icon_color">{{item.icon_name}}</span>
                      <span> {{item.description}} (APP专享)</span>
                    </p>
                  </ul>
                </section>
                <header class="activities_title_style">
                  <span>商家公告</span>
                </header>
                <p class="Sue">{{DetailsData.promotion_info}}</p>
              </div>
            </template>
          </van-overlay>
        </section>
      </header>
    </div>

  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  data() {
    return {
      show: false
    }
  },
  computed: {
    ...mapState(['DetailsData'])
  },
  methods: {
    GOback() {
      this.$router.go(-1)
      this.$store.commit('empty')
    },
    goDetailsShang() {
      this.$router.push('/Details/DetailShang')
    },
    show1() {
      this.show = true
      this.$store.commit('showxiu1', this.show)
    },
    show2() {
      this.show = false
      this.$store.commit('showxiu2', this.show)
    }
  }
}
</script>

<style lang="less" scoped>
.van-overlay {
  background-color: #262626;
}

.topoverlay {
  text-align: center;
  font-size: 0.8rem;
  color: #fff;
}
.van-icon-arrow-left {
  position: fixed;
  top: 0;
  left: 0;
  width: 80%;
  height: 2rem;
  z-index: 11;
  padding-top: 0.2rem;
  padding-left: 0.2rem;
}
.description_te {
  color: #fff;
}
.shop_detail_header {
  height: 100%;
  position: relative;
  .header_cover_img_con {
    height: 100%;
    overflow: hidden;
    position: absolute;
    width: 100%;
    > img {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 9;
      filter: blur(10px);
    }
  }
  .h4top {
    font-size: 0.8rem;
    color: #fff;
    font-weight: 700;
    width: 100%;
    // margin-bottom: 0.3rem;
  }
  .description_header {
    position: relative;
    z-index: 10;
    background-color: rgba(119, 103, 137, 0.43);
    padding: 0.2rem 0 0.2rem 0.4rem;
    width: 100%;
    overflow: hidden;
    .description_top {
      display: flex;
      .description_left {
        margin-right: 0.3rem;
        > img {
          width: 2.9rem;
          height: 2.9rem;
          display: block;
          border-radius: 0.15rem;
        }
      }
      .description_right {
        flex: 1;

        // .description_text {
        //   margin-bottom: 0.3rem;
        // }
        .description_promotion {
          width: 11.5rem;
        }
      }
      .van-icon-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 0.3rem;
        z-index: 11;
      }
    }
    .description_footer {
      display: flex;
      justify-content: space-between;
      // margin-top: 0.5rem;
      padding-right: 1rem;
      color: #fff;
      .footer_p {
        width: 80%;
      }
      .van-icon-arrow {
        width: 0.45rem;
        height: 0.45rem;
        position: absolute;
        right: 0.4rem;
      }
    }
  }
}
.tip_icon1 {
  padding: 0 0.04rem;
  border: 0.025rem solid #fff;
  border-radius: 0.1rem;
  font-size: 0.4rem;
  display: inline-block;
}
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.overlay {
  padding: 1.25rem;
  color: #fff;
  .titletop {
    text-align: center;
  }
  .activities_list {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    font-size: 0.5rem;

    > ul p {
      margin-bottom: 0.2rem;
    }
  }
  .activities_title_style {
    text-align: center;
    margin-bottom: 1rem;
    > span {
      border: 0.025rem solid #555;
      padding: 0.2rem 0.4rem;
      border-radius: 0.5rem;
    }
  }
}
</style>